<template>
  <a-modal
    title="角色用户绑定"
    :visible="visible"
    :mask-closable="false"
    :body-style="{padding:'15px 18px'}"
    :confirm-loading="confirmLoading"
    :footer="null"
    :width="800"
    :centered="true"
    @ok="handleOk"
    @cancel="handleClose"
  >

    <pro-table
      ref="table"
      toolbar-title="角色管理"
      :row-key="rowKey"
      :request="tableRequest"
      :columns="columns"
      :lazy-load="true"
      :toolbar-enabled="false"
      search-form-class-name="ballcat-pro-table-search-unwrap"
    >

      <!-- 查询条件 -->
      <template #search-form="searchFormState">
        <a-row :gutter="16">
          <a-col :md="6" :sm="24">
            <a-form-item label="用户ID">
              <a-input-number
                v-model="searchFormState.queryParam.userId"
                type="number"
                placeholder="请输入"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="用户名">
              <a-input v-model="searchFormState.queryParam.username" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="组织">
              <sys-organization-tree-select
                v-model="searchFormState.queryParam.organizationId"
                :tree-data="organizationTree"
                :allow-clear="true"
              />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item :wrapper-col="{flex: '1 1 0'}" class="search-actions-wrapper">
              <a-space>
                <a-button type="primary" :loading="searchFormState.loading" @click="searchFormState.reloadTable(true)">查询</a-button>
                <a-button @click="searchFormState.resetSearchForm">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </template>

      <!--数据表格区域-->
      <template #action-slot="text, record">
        <a-popconfirm
          v-has="'system:user:grant'"
          title="确认要解绑吗？"
          @confirm="() => handleUnbind(record)"
        >
          <a href="javascript:" class="ballcat-text-danger">解绑</a>
        </a-popconfirm>
      </template>
    </pro-table>
  </a-modal>
</template>

<script>
import ProTable from '@/components/Table/ProTable'
import { getRoleUserPage, unbindRoleUser } from '@/api/system/role'
import { doRequest } from '@/utils/request'
import SysOrganizationTreeSelect from '@/views/system/organization/SysOrganizationTreeSelect'

export default {
  name: 'RoleUserModal',
  components: { SysOrganizationTreeSelect, ProTable },
  props: {
    organizationTree: {
      type: [Array],
      default: () => []
    },
  },
  data () {
    return {
      confirmLoading: false,
      visible: false,

      rowKey: 'userId',
      tableRequest: (queryParam) => {
        return getRoleUserPage(Object.assign({}, queryParam, {roleCode: this.roleCode}))
      },

      columns: [
        {
          title: '用户Id',
          dataIndex: 'userId',
          width: '45px'
        },
        {
          title: '用户名',
          dataIndex: 'username',
          width: '45px'
        },
        {
          title: '昵称',
          dataIndex: 'nickname',
          width: '45px'
        },
        {
          title: '组织机构',
          dataIndex: 'organizationName',
          width: '45px'
        },
        {
          key: 'operate',
          title: '操作',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action-slot' }
        }
      ],

      // 搜索表单的布局
      searchFormLayout: {
        labelCol: {
          md: { span: 7 }
        },
        wrapperCol: {
          md: { span: 17 }
        }
      },

      // 角色标识
      roleCode: null,
    }
  },
  methods: {
    // 刷新表格
    reloadPageTable (withFirstPage = true) {
      this.$refs.table.reloadTable(withFirstPage)
    },
    show (record) {
      this.visible = true
      this.roleCode = record.code
      this.$nextTick(() => {
        this.$refs.table.resetSearchForm(true)
      })
    },
    handleOk (e) {
      this.confirmLoading = true
    },
    handleClose (e) {
      this.visible = false
      this.confirmLoading = false
    },
    handleUnbind (record) {
      doRequest(unbindRoleUser(record.userId, this.roleCode), {
        onSuccess: () => {
          this.reloadPageTable(false)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
